<script setup>
import { ref } from "vue";
const props = defineProps({
  orginList: {
    type: Array,
    default: () => [],
  },

});
const list = ref([]);
const emit = defineEmits(["change"]);
watchEffect(() => {

  if (props.orginList.length) {
   
    list.value = JSON.parse(JSON.stringify(props.orginList));
  }
});

const activeFun = (item) => {
  list.value.forEach((e) => {
    e.state = false;
    if (e.permissionLabel == item.permissionLabel) {
      e.state = true;
      emit("change", e);
    }
  });
};
</script>
<template>
  <div class="flex align-items-center">
    <div
      class="itemClass"
      :class="item.state ? 'activeItemClass' : 'noActiveItemClass'"
      v-for="(item, index) in list"
      :key="index"
      @click="activeFun(item)"
    >
      {{ item.permissionLabel }}
    </div>
  </div>
</template>

<style lang="less" scoped>
.itemClass {
  cursor: pointer;
  padding: 9px 16px;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1px;
  border-top: 1px solid #3480ff;
  border-bottom: 1px solid #3480ff;
  &:first-child {
    border-radius: 32px 0 0 32px;
    border-left: 1px solid #3480ff;
  }
  &:last-child {
    border-radius: 0 32px 32px 0;
    border-right: 1px solid #3480ff;
  }
  &:nth-of-type(2n) {
    border-left: 1px solid #3480ff;
    border-right: 1px solid #3480ff;
  }
}
.activeItemClass {
  color: #fff;
  background: #3480ff;
}
.noActiveItemClass {
  color: #3480ff;
  background: #fff;
}
</style>
